<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>产品中心</title>
    {include file='commonjs'}
</head>

<body class="page product">

    <!-- c-nav 开始 -->
    {include file='common_head'}
    <!-- c-nav 结束 -->

    <!-- c-banner 开始 -->
    <div class="c-banner">
        <div class="banner">
            <img class="banner-pic" src="/static/index/img/page/product/pro_banner.png" alt="">
        </div>
        <div class="series">
            <ul class="series-list clearfix">
                <li class="series-list-item oStyle act">
                    <a href="javascript:">矿泉直饮系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">RO逆渗透纯水系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">集成供水系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">空气净化器系列</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- c-banner 结束 -->

    <!-- pro_main 开始 -->
    <div class="pro_main">
        <div class="i_title">
            <p>矿泉直饮系列</p>
            <p class="i_title-cl">Mineral Spring Series</p>
            <span></span>
        </div>
        <ul class="prolist MT-45 clearfix" id="prolist">
            <!--<li class="prolist-item">
                <div class="prolist-item-pic">
                    <img src="img/page/product/pro_pic.png">
                </div>
                <p class="prolist-item-title">
                    矿物质净水器R5
                </p>
                <P class="prolist-item-text">
                    美国原装进口陶氏纳滤膜 六级过滤 水电分离
                    自动清洗
                </P>
                <p class="prolist-item-mor">
                    <a href="javascript:">了解详情&raquo;</a>
                </p>
            </li>-->
        </ul>
        <div class="page_box">
            <div id="pagination1" class="page fl iPage"></div>
            <!--<ul class="i_pages clearfix" id="pageTool">
                <li class="pages-up">
                    <a href="javascript:" style="background-image: url('img/common/up.png')"></a>
                </li>
                <li class="pages_item">
                    <a class="pagesActive" href="javascript:">1</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">2</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">3</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">4</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">5</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">6</a>
                </li>
                <li class="pages-next">
                    <a href="javascript:" style="background-image: url('img/common/next.png')"></a>
                </li>
            </ul>-->
        </div>
    </div>
    <!-- pro_main 结束 -->

    <!-- c-footer 开始 -->
    {include file='common_footer'}
    <!-- c-footer 结束 -->

    <!-- 产品 -->
    <script type="text/x-handlebars-template" id="proTemp">
        <% _.each(data, function(item) { %>
            <li class="prolist-item">
                <div class="prolist-item-pic">
                    <img class="lazy" data-original="<%= item.pic %>">
                </div>
                <p class="prolist-item-title">
                    <%= item.title %>
                </p>
                <P class="prolist-item-text">
                    <%= item.text %>
                </P>
                <p class="prolist-item-mor">
                    <a href="<%= item.href %>">了解详情&raquo;</a>
                </p>
            </li>
        <% }) %>
    </script>

    <script>
        require(['jquery', 'SMV', 'layer', 'lodash', 'lazyload', 'jqPage'], function($, SMV, layer, _, lazyload) {

            var obj = {};

            // 类
            var sele = $(".oStyle");
            for (var i = 0; i < sele.length; i++) {
                sele.eq(i).attr("data-id", i);
            }
            obj.style = parseInt($(".act").attr("data-id"));
            sele.click(function () {
                $(this).addClass("act").siblings().removeClass("act");
                obj.style = parseInt($(".act").attr("data-id"));
            });

            function ele() {
                var proTemp = _.template($("#proTemp").html());
                $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/product" ,function (res) {
                    var pro = $("#prolist");
                    pro.html(proTemp({data: res.data}));

                    $("img.lazy").lazyload({
                        effect : "fadeIn"
                    });

                    // 分页
                    $("#pagination1").pagination({
                        currentPage: 1, // 当前页
                        isShow: false, // 首尾显示
                        totalPage: res.pages, // 总页数
                        prevPageText: "上一页",// 上一页文本
                        nextPageText: "下一页",// 下一页文本
                        callback: function(current) {
                            $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/product" ,function (res) {
                                var pro = $("#prolist");
                                pro.html(proTemp({data: res.data}));

                                $("img.lazy").lazyload({
                                    effect : "fadeIn"
                                });

                            });
                            obj.p = current;
                            console.log(obj);
                        }
                    });
                });

            }
            ele();
            //
            /*var list = $(".i_pages .pages_item"), up = $("pages-up"), next = $("pages-next");
           var liLength =  list.length;
           var oWidth = 100 + liLength*50;
           console.log(liLength);
           $("#pageTool").css("width",oWidth + "px");
           list.click(function () {
               $(this).children("a").addClass("pagesActive");
               $(this).siblings().children("a").removeClass("pagesActive");
           });
           for (var i = 0; i <list.length; i++) {
               up.click(function () {
                   var upThis = $("")
               })
           }*/


            // nav
            $(window).scroll( function() {
                var t = $(document).scrollTop();
                if (t > 0) {
                    $(".c-nav").addClass("c_nav-scroll");
                }else {
                    $(".c-nav").removeClass("c_nav-scroll");
                }
            });

            // 留言
            new SMV('form', {
                rules: {
                    onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                },
                fields: {
                    name: {
                        required: "姓名未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#name');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    phone: {
                        required: "号码未填写",
                        failHtml: false,
                        rule: "required|disblur|onlyPhone",
                        fail: function (messages) {
                            layer.tips(messages, '#phone');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    corp: {
                        required: "公司未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#corp');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    idea: {
                        required: "意见未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#idea');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    }
                },
                short: true,
                submit: function(valid, form) {
                    if(valid) {
                        form.submit();
                    }
                }
            })
        })
    </script>
</body>

</html>